import React, { Suspense } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import routes from "./Router_confog";
import * as Type from "../utils/index.d";
type Props = {};

const Router_view = (props: Props) => {
  const routerList = (arr: Type.RouterList) => {
    return arr.map((item, index) => {
      return (
        <Route
          key={index}
          path={item.path}
          element={
            item.element ? (
              <item.element></item.element>
            ) : (
              <Navigate to={item.to as string}></Navigate>
            )
          }
        >
          {item.children && routerList(item.children)}
        </Route>
      );
    });
  };
  return (
    <div>
      <Suspense fallback={<>路由加载中</>}>
        <BrowserRouter>
          <Routes>{routerList(routes)}</Routes>
        </BrowserRouter>
      </Suspense>
    </div>
  );
};

export default Router_view;
